<template>
  <el-tabs v-loading="isLoading" v-model="activeName" type="border-card" @tab-click="tabClick">
    <el-tab-pane label="站点数据分析" name="1">
      <el-row>
        <el-col :span="24">
          <TopSearch @query-info="getResult" :pointList="siteOption" ref="topSearchRef"></TopSearch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <PointChart
            v-if="activeName == '1'"
            :data="pointData"
            :query-time="siteQueryTime"
            ref="pointChart"
          ></PointChart>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="bottom-title">
            <div>{{ activeName_text }}超重违法统计明细</div>
            <div>
              <cs-btn btnText="导出" type="search" @click.native="siteExportfn"></cs-btn>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="pointTableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="siteName" label="站点"></el-table-column>
            <el-table-column prop="checkCount" label="检测数"></el-table-column>
            <el-table-column prop="overloadCount" label="超重数"></el-table-column>
            <el-table-column prop="normalCount" label="未超重数"></el-table-column>
            <el-table-column label="超重比">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.overloadRate).handleNum2 }}%
              </template>
            </el-table-column>
            <el-table-column label="平均超重幅度">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.averageOverRate).handleNum2 }}%
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="时间数据分析" name="2">
      <el-row>
        <el-col :span="24">
          <TopSearch
            :is-time="true"
            @query-info="getResult"
            :pointList="siteOption"></TopSearch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <TimeChart v-if="activeName == '2'" :data="timeData" :query-time="timeQueryTime" ref="timeChart"></TimeChart>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="bottom-title">
            <div>{{ activeName_text }}超重违法统计明细</div>
            <div>
              <cs-btn btnText="导出" type="search" @click.native="timeExportfn"></cs-btn>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="timeTableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="checkCount" label="检测数"></el-table-column>
            <el-table-column prop="overloadCount" label="超重数"></el-table-column>
            <el-table-column prop="normalCount" label="未超重数"></el-table-column>
            <el-table-column label="超重比">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.overloadRate).handleNum2 }}%
              </template>
            </el-table-column>
            <el-table-column label="平均超重幅度">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.averageOverRate).handleNum2 }}%
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="轴数数据分析" name="3">
      <el-row>
        <el-col :span="24">
          <TopSearch @query-info="getResult" :pointList="siteOption"></TopSearch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <PieChart
            v-if="activeName == '3'"
            :id="'c1'"
            :title="'各轴数超重占比'"
            :data="axlePieData"
            :query-time="tabRollAreaQueryTime"
            ref="axesPieChart"
          ></PieChart>
        </el-col>
        <el-col :span="12">
          <BarChart
            v-if="activeName == '3'"
            :id="'c2'"
            :title="'各轴数超重数'"
            :data="axleBarData"
            :query-time="tabRollAreaQueryTime"
            ref="axesBarChart"
          ></BarChart>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="bottom-title">
            <div>{{ activeName_text }}超重违法统计明细</div>
            <div>
              <cs-btn btnText="导出" type="search" @click.native="axlesExportfn"></cs-btn>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="axesTableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="axleNum" label="轴数"></el-table-column>
            <el-table-column prop="checkCount" label="检测数"></el-table-column>
            <el-table-column prop="overloadCount" label="超重数"></el-table-column>
            <el-table-column prop="normalCount" label="未超重数"></el-table-column>
            <el-table-column label="超重比">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.overloadRate).handleNum2 }}%
              </template>
            </el-table-column>
            <el-table-column label="平均超重幅度">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.averageOverRate).handleNum2 }}%
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="区域数据分析" name="4">
      <el-row>
        <el-col :span="24">
          <TopSearch @query-info="getResult" :pointList="siteOption"></TopSearch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <PieChart
            v-if="activeName == '4'"
            :id="'d1'"
            :title="'各区域超重占比'"
            :data="areaPieData"
            :query-time="tabRollAreaQueryTime"
            ref="areaPieChart"
          ></PieChart>
        </el-col>
        <el-col :span="12">
          <BarChart
            v-if="activeName == '4'"
            :id="'d2'"
            :title="'各区域超重数'"
            :data="areaBarData"
            :query-time="tabRollAreaQueryTime"
            ref="areaBarChart"
          ></BarChart>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="bottom-title">
            <div>{{ activeName_text }}超重违法统计明细</div>
            <div>
              <cs-btn btnText="导出" type="search" @click.native="areaExportfn"></cs-btn>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="areatableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="areaName" label="区域"></el-table-column>
            <el-table-column prop="checkCount" label="检测数"></el-table-column>
            <el-table-column prop="overloadCount" label="超重数"></el-table-column>
            <el-table-column prop="normalCount" label="未超重数"></el-table-column>
            <el-table-column label="超重比">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.overloadRate).handleNum2 }}%
              </template>
            </el-table-column>
            <el-table-column label="平均超重幅度">
              <template slot-scope="scope">
                {{ toPercentage(scope.row.averageOverRate).handleNum2 }}%
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import PieChart from './components/PieChart'
import TopSearch from './components/TopSearch'
import BarChart from './components/BarChart'
import TimeChart from './components/TimeChart'
import PointChart from './components/PointChart'
import csBtn from '@/components/cs-btn/cs-btn.vue'

import { toPercentage } from '@/utils/dataConversion'
import { getAllSiteName, getSiteNameAndId } from '@/service/operate/site_manage/site_manage'

import {
  getSiteDataAnalysis,
  getTimeDataAnalysis,
  getAxleDataAnalysis,
  getAreaDataAnalysis,
  exportSiteData,
  exportTimeData,
  exportAxleData,
  exportAreaData
} from '@/service/census/census'

export default {
  name: 'Index',
  components: {
    TopSearch,
    PieChart,
    BarChart,
    TimeChart,
    PointChart,
    csBtn
  },
  data() {
    return {
      tableHeight: 250,
      activeName: '1',
      activeName_text: '站点',
      siteId: '',
      pointData: {
        totalVehicleCount: 0,
        totalOverloadCount: 0,
        totalNormalCount: 0,
        checkCount: [],
        normalCount: [],
        overloadCount: [],
        averageOverRate: []
      },
      // 查询时间
      siteQueryTime: '近三天',
      timeQueryTime: '近24小时',
      rollQueryTime: '近三天',
      areaQueryTime: '近三天',
      tabRollAreaQueryTime: '',
      // pointPieData: [],
      // pointBarData: [],
      pointTableData: [],
      siteOption: [],
      timeData: {
        count: [],
        percent: []
      },
      timeTableData: [],
      axlePieData: [],
      axleBarData: [],
      axesTableData: [],
      areaPieData: [],
      areaBarData: [],
      areatableData: [],
      isLoading: false
    }
  },
  created() {
    this.getSiteDataAnalysis()
    this.getTimeDataAnalysis()
    this.getAxleDataAnalysis()
    this.getAreaDataAnalysis()
    // 获取所有站点名称
    this.getAllSiteName()
  },
  methods: {
    toPercentage,
    async getSiteNameAndId(siteName) {
      const data = await getSiteNameAndId()
      // console.log(data)

      if (data.code === 0) {
        data.data.forEach((item) => {
          if (item.name === siteName) {
            this.siteId = item.id
          }
        })
      }
    },
    async siteExportfn() {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = await exportSiteData(this.listModel)
      if (!!data) {
        const filename = '站点超重违法统计明细.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    async timeExportfn() {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = await exportTimeData(this.listModel)
      if (!!data) {
        const filename = '时间超重违法统计明细.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    async axlesExportfn() {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = await exportAxleData(this.listModel)
      if (!!data) {
        const filename = '轴数超重违法统计明细.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    async areaExportfn() {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = await exportAreaData(this.listModel)
      if (!!data) {
        const filename = '区域超重违法统计明细.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    tabClick(tab, event) {
      if (this.activeName == '1') {
        this.activeName_text = '站点'
      } else if (this.activeName == '2') {
        this.activeName_text = '时间'
      } else if (this.activeName == '3') {
        this.activeName_text = '轴数'
        this.tabRollAreaQueryTime = this.rollQueryTime
      } else {
        this.activeName_text = '区域'
        this.tabRollAreaQueryTime = this.areaQueryTime
      }
    },
    async getResult(e) {
      // switch (this.activeName) {
      //   case '站点':
      //     this.getSiteDataAnalysis({
      //       startTime: e.times == null ? '' : e.times[0],
      //       endTime: e.times == null ? '' : e.times[1]
      //     })
      //     break
      //   case '时间':
      //     this.getTimeDataAnalysis({
      //       startTime: e.times == null || e.times[0],
      //       endTime: e.times == null || e.times[1]
      //     })
      //     break
      //   case '轴数':
      //     this.getAxleDataAnalysis({
      //       startTime: e.times == null || e.times[0],
      //       endTime: e.times == null || e.times[1]
      //     })
      //     break
      //   case '区域':
      //     this.getAreaDataAnalysis({
      //       startTime: e.times == null || e.times[0],
      //       endTime: e.times == null || e.times[1]
      //     })
      //     break
      // }
      if (this.activeName === '1') {
        if (e.point) {
          await this.getSiteNameAndId(e.point)
        } else {
          this.siteId = ''
        }

        this.getSiteDataAnalysis({
          startTime: e.times == null ? undefined : e.times[0],
          endTime: e.times == null ? undefined : e.times[1],
          site: this.siteId
        })
        // 时间显示
        if (e.times === '') {
          this.siteQueryTime = '近三天'
        } else {
          this.siteQueryTime = this.timeFormat(e.times[0]) + '至' + this.timeFormat(e.times[1])
        }
      } else if (this.activeName === '2') {
        if (e.point) {
          await this.getSiteNameAndId(e.point)
        } else {
          this.siteId = ''
        }

        this.getTimeDataAnalysis({
          startTime: e.times == null ? undefined : e.times[0],
          endTime: e.times == null ? undefined : e.times[1],
          site: this.siteId
        })
        // 时间显示
        if (e.times === '') {
          this.timeQueryTime = '近24小时'
        } else {
          this.timeQueryTime = e.times[0] + '至' + e.times[1]
        }
      } else if (this.activeName === '3') {
        if (e.point) {
          await this.getSiteNameAndId(e.point)
        } else {
          this.siteId = ''
        }

        this.getAxleDataAnalysis({
          startTime: e.times == null ? undefined : e.times[0],
          endTime: e.times == null ? undefined : e.times[1],
          site: this.siteId
        })
        // 时间显示
        if (e.times === '') {
          this.rollQueryTime = '近三天'
        } else {
          this.rollQueryTime = this.timeFormat(e.times[0]) + '至' + this.timeFormat(e.times[1])
          this.tabRollAreaQueryTime = this.rollQueryTime
        }
      } else if (this.activeName === '4') {
        if (e.point) {
          await this.getSiteNameAndId(e.point)
        } else {
          this.siteId = ''
        }

        this.getAreaDataAnalysis({
          startTime: e.times == null ? undefined : e.times[0],
          endTime: e.times == null ? undefined : e.times[1],
          site: this.siteId
        })
        // 时间显示
        if (e.times === '') {
          this.areaQueryTime = '近三天'
        } else {
          this.areaQueryTime = this.timeFormat(e.times[0]) + '至' + this.timeFormat(e.times[1])
          this.tabRollAreaQueryTime = this.areaQueryTime
        }
      }
    },
    // 获取站点分析数据

    async getSiteDataAnalysis(params) {
      // 初始化表格和图表数据
      this.isLoading = true
      this.pointData.overloadCount = []
      this.pointData.averageOverRate = []
      this.pointData.checkCount = []
      this.pointData.normalCount = []
      // this.pointPieData = []
      // this.pointBarData = []
      this.pointTableData = []
      try {
        // 请求数据
        const data = await getSiteDataAnalysis(params)
        // console.log('站点all', data)
        if (data.code === 0) {
          this.isLoading = false
          const siteData = data.data
          // console.log(siteData)
          // 拼接南丁格尔图第一份对象数据
          // this.pointPieData.push({
          //   name: '未超重',
          // 总未超限次数
          //   value: siteData.totalNormalCount
          // })
          // siteData.dataList.forEach((item) => {
          // 拼接南丁格尔图数据
          // this.pointPieData.push({
          //   name: item.siteName,
          //   value: item.overloadCount,
          //   overloadAver: toPercentage(item.averageOverRate).handleNum2
          // })
          // 拼接柱状图
          // this.pointBarData.push([item.siteName, item.overloadCount])
          // })
          // 在拿到表格数据后，调用南丁格尔图和饼状图的初始化图表方法
          // 如果不手动调用，那么echarts会在拿到数据前渲染表格，这样表格将会没有数据
          // this.$refs.pointPieChart.initChart()
          // this.$refs.pointBarChart.initChart()
          siteData.dataList.forEach((item) => {
            // 拼接南丁格尔图数据
            this.pointData.overloadCount.push([item.siteName, item.overloadCount])
            this.pointData.averageOverRate.push([item.siteName, item.averageOverRate.toFixed(2)])
            this.pointData.checkCount.push([item.siteName, item.checkCount])
            this.pointData.normalCount.push([item.siteName, item.normalCount])
            // 拼接表格数据
            this.pointTableData.push({
              ...item
            })
          })
          this.pointData.totalNormalCount = siteData.totalNormalCount
          this.pointData.totalOverloadCount = siteData.totalOverloadCount
          this.pointData.totalVehicleCount = siteData.totalVehicleCount
          setTimeout(() => {
            // console.log(this.pointData)
            this.$refs.pointChart.initChart()
          }, 0)
          // console.log(this.pointData)
          // console.log(this.pointBarData)
        } else {
          this.$message.error('查询失败1')
          setTimeout(() => {
            this.isLoading = false
          }, 3000)
        }
      } catch (err) {
        // console.log(err)
        // this.$message.error('服务器出错了')
      }
    },
    // 获取时间分析数据
    async getTimeDataAnalysis(params) {
      this.isLoading = true
      this.timeData.count = []
      this.timeData.percent = []
      this.timeTableData = []
      try {
        const data = await getTimeDataAnalysis(params)
        if (data.code === 0) {
          this.isLoading = false
          const timeData = data.data
          // console.log('time', timeData)
          timeData.dataList.forEach((item) => {
            // 获取小时，并对原数据进行更改
            // item.time = item.time.split(' ')[1].split(':')[0] + '点'
            // 拼接图表数据
            this.timeData.count.push([item.time, item.overloadCount])
            this.timeData.percent.push([item.time, toPercentage(item.overloadRate).handleNum2])
            // 拼接表格数据
            this.timeTableData.push({ ...item })
          })
          // console.log('time', this.timeData)
          this.$refs.timeChart.initChart()
        } else {
          this.$message.error(data.msg)
          setTimeout(() => {
            this.isLoading = false
          }, 3000)
        }
      } catch (err) {
        // console.log(err)
        // this.$message.error('服务器出错了')
      }
    },
    // 获取轴数分析数据
    async getAxleDataAnalysis(params) {
      this.isLoading = true
      this.axlePieData = []
      this.axleBarData = []
      this.axesTableData = []
      try {
        const data = await getAxleDataAnalysis(params)
        if (data.code === 0) {
          this.isLoading = false
          const axleData = data.data
          // 拼接饼图第一条对象数据
          this.axlePieData.push({
            name: '未超重',
            // 未超限次数
            value: axleData.totalNormalCount
          })
          axleData.dataList.forEach((item) => {
            // 改造轴数名称
            item.axleNum = this.getAxleNumFullTitle(item.axleNum)
            // 拼接南丁格尔图数据
            this.axlePieData.push({
              originName: item.axleNum,
              name: item.axleNum,
              value: item.overloadCount,
              overloadAver: toPercentage(item.averageOverRate).handleNum2
            })
            // 拼接柱状图数据
            this.axleBarData.push([item.axleNum, item.overloadCount])
            // 拼接表格数据
            this.axesTableData.push({ ...item })
          })
          this.$refs.axesPieChart.initChart()
          this.$refs.axesBarChart.initChart()
        } else {
          this.$message.error('查询失败')
          setTimeout(() => {
            this.isLoading = false
          }, 3000)
        }
      } catch (err) {
        // console.log(err)
        // this.$message.error('服务器出错了')
      }
    },
    // 拼接获取轴数全称
    getAxleNumFullTitle(axleNum) {
      if (axleNum <= 5) {
        return axleNum + '轴'
      } else {
        return axleNum + '轴及以上'
      }
    },
    // 获取区域分析数据
    async getAreaDataAnalysis(params) {
      this.isLoading = true
      this.areaPieData = []
      this.areaBarData = []
      this.areatableData = []
      try {
        const data = await getAreaDataAnalysis(params)
        if (data.code === 0) {
          this.isLoading = false
          const areaData = data.data
          // 拼接饼图第一条对象数据
          this.areaPieData.push({
            name: '未超重',
            // 未超限次数
            value: areaData.totalNormalCount
          })
          areaData.dataList.forEach((item) => {
            // 拼接南丁格尔图数据
            this.areaPieData.push({
              originName: item.areaName,
              name: item.areaName,
              value: item.overloadCount,
              overloadAver: toPercentage(item.averageOverRate).handleNum2
            })
            // 拼接柱状图数据
            this.areaBarData.push([item.areaName, item.overloadCount])
            // 拼接表格数据
            this.areatableData.push({ ...item })
          })
          this.$refs.areaPieChart.initChart()
          this.$refs.areaBarChart.initChart()
        } else {
          this.$message.error('查询失败')
          setTimeout(() => {
            this.isLoading = false
          }, 3000)
        }
      } catch (err) {
        // console.log(err)
        // this.$message.error('服务器出错了')
      }
    },
    // 获取所有站点名称
    async getAllSiteName() {
      try {
        const data = await getAllSiteName()
        if (data.code === 0) {
          // console.log(data)
          // 拼接站点数据
          data.data.forEach((item) => {
            this.siteOption.push({
              value: item,
              label: item
            })
          })
        }
      } catch (err) {
        // console.log(err)
        // this.$message.error('服务器出错了')
      }
    },
    // 格式化时间
    timeFormat(time) {
      var date = new Date(time)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    }
  }
}
</script>

<style lang="less" scoped>
// .el-tabs {
//   height: 100%;
// }

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.bottom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f9ff;
  height: 60px;
  padding: 15px;
}
</style>
